<template>
  <div class="import">
    <div class="app-container">
      <el-card shadow="always" :body-style="{ padding: '20px' }">
        <div slot="header">
          <span>批量导入员工</span>
        </div>
        <!-- card body -->
        <UploadExcel
          :before-upload="beforeUpload"
          :on-success="handleSuccess"
        />
      </el-card>
    </div>
  </div>
</template>

<script>
import { formatExcelDate } from '@/utils/index.js'
import { importEmployees } from '@/api/employees'
export default {
  methods: {
    // 1. 校验上传文件的大小、格式等
    beforeUpload (file) {
      console.log('文件对象：', file)
      // 计算机存储单位：1M = 1024KB（千字节）   1KB = 1024B（字节）
      const isLt1M = file.size / 1024 / 1024 < 2
      // 上传excel大小不能超过2M
      if (isLt1M) {
        // 校验成功（必须返回true）
        return true
      }
      // 校验失败
      this.$message({
        message: '上传大小不能超过2M！',
        type: 'warning'
      })
      return false
    },
    // 2. 校验通过之后，通过这个回调函数获取excel中的员工数据了
    /**
     * header excel中表头
     * results 读取的员工的数据（多个）
     */
    async handleSuccess ({ header, results }) {
      console.log('读取到的excel中的数据：', header, results)
      /**
       * 1.因为读取到的 results 中员工数据属性名是中文，需要转换为英文属性名
       * 2.如果 excel 中有时间的话，需要格式化时间
       * 3.调用后台接口传入处理 ok 的results数据做上传
       */
      const enResults = this.transformResults(results)
      console.log('转换结果', enResults)
      await importEmployees(enResults)
      this.$message.success('上传成功')
      this.$router.back()
    },
    // 读取到的 results 中员工数据属性名是中文，需要转换为英文属性名
    transformResults (result) {
      const userMap = {
        '入职日期': 'timeOfEntry',
        '聘用形式': 'formOfEmployment',
        '手机号': 'mobile',
        '姓名': 'username',
        '转正日期': 'correctionTime',
        '工号': 'workNumber',
        '部门': 'departmentName'
      }
      /**
       * 1.准备一个存储转换结果的数组
       * 2.循环result 数组，根据 userMap 中英映射关系，进行转换
       * 3.返回转换后的结果
       */
      const newResults = []
      result.forEach(item => {
        // 中文属性的item (员工信息) 转换成英文的
        const enUser = {}
        for (const zhKey in item) {
          // 根据zhKey 结合映射关系获取 enKey(英文属性名)
          const enKey = userMap[zhKey]
          if (enKey === 'timeOfEntry' || enKey === 'correctionTime') {
            // 格式化excel时间
            enUser[enKey] = formatExcelDate(item[zhKey], '-')
          } else {
            enUser[enKey] = item[zhKey]
          }
        }
        newResults.push(enUser)
      })
      return newResults
    }
  }
}

</script>

<style lang="scss" scoped>
</style>
